.wrapper {
  width: 702rpx;
  margin: 0 auto;
}
.header-bar {
  width: 702rpx;
  height: 168rpx;
  border-radius: 12rpx;
  margin-top: 24rpx;
  margin-bottom: 24rpx;
  image {
    width: 100%;
    height: 100%;
  }
}

.content {
  background-color: #ffffff;
  border-radius: 12rpx;
  .success-box {
    width: 420rpx;
    margin: 0 auto;
    margin-top: 50rpx;
    .success-wraper {
      display: flex;
      display: -webkit-box; 
      display: -moz-box; 
      display: -ms-flexbox; 
      display: -webkit-flex; 
      justify-content: center;
      align-items: center;
      flex-direction: column;
      image {
        width: 120rpx;
        height: 70rpx;
      }
      text {
        font-size: 32rpx;
        font-weight: bold;
        padding-top: 30rpx;
        padding-bottom: 80rpx;
      }
      .rule-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        b {
          display: block;
          width: 150rpx;
          border-top: solid 1rpx #ddd;
        }
        p {
          font-size: 24rpx;
          color: #333;
          padding: 0 12rpx;
        }
      }
    }
    .success-user {
      display: flex;
      flex-direction: row;
      .father {
        position: relative;
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50rpx;
        }
        .head-group {
          position: absolute;
          left: 20rpx;
          bottom: 0;
          width: 60rpx;
          height: 30rpx;
          border-radius: 4rpx;
          color: #ffffff;
          font-size: 22rpx;
          background: linear-gradient(to right, #ff7371, #ff4a48);
          text-align: center;
        }
        .no-head{
            width: 100rpx;
            height: 100rpx;
            line-height: 100rpx;
            border-radius: 50rpx;
            border: dashed 1rpx #ddd;
            font-size: 40rpx;
            color: #bbb;
            text-align: center;
        }
      }
    }
    .see-btn{
        width: 360rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 36rpx;
        color: #231816;
        background: linear-gradient(to right, #fff100, #ffe000);
        padding: 0;
        border-radius: 44rpx;
        margin: 100rpx auto;
    }
    .see-btn:after{
     border: none;
    }
  }
}

.father:nth-child(2) {
  margin-right: 60rpx;
  margin-left: 60rpx;
}
.border-red {
  border: solid 1rpx #ff4a48;
}
.hit-green{ color: #10d010};
.hit-red{color:#ff4a48};